<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/common.css">
<script src="__CDN__/assets/addons/vuemagic/vue.js"></script>
<script src="__CDN__/assets/addons/vuemagic/element/element.js"></script>
<script src="__CDN__/assets/addons/vuemagic/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/vuemagic/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/vuemagic/moment.js"></script>
<!--以上js文件不是必须的，您可以将不使用的js删除掉，这里为了考虑所有字段类型情况全部进行了引入-->
<div id="formDetail" v-cloak>
    <div class="form-bodys">
        <el-form :model="baseFrom" ref="baseFrom" :rules="rules" label-width="114px" class="demo-baseFrom">
                   <el-form-item label="{:__('Title')}：" prop="title">
          <el-input v-model="baseFrom.title" placeholder="请输入{:__('title')}" size="medium"></el-input>
       </el-form-item>
        <el-form-item label="{:__('Content')}：" prop="content">
          <form action="" class="form-horizontal" data-toggle="validator" id="add-form" method="POST" role="form"
                  style="margin-bottom: 18px;">
                <div class="display-flex" style="margin: 0;align-items: flex-start;">                  
                    <div style="flex: 1;">
                            <textarea class="form-control editor" cols="50" id="base-content" 
                                      rows="50">{{baseFrom.content}}</textarea>
                    </div>
                </div>
            </form>
       </el-form-item>
        <el-form-item label="{:__('User_id')}：" prop="user_id">
         <div class="display-flex">
                    <div class="user-container">
                        <el-select style="position: relative;" v-model="baseFrom.user_id"  filterable
                            size="medium" placeholder="" :filter-method="dataUserFilter">
                            <el-option v-for="item in aboutUserOptions" :key="item.id" :label="item.name??item.username"
                                :value="item.id">
                                <!--可根据自己的业务需求加工一下代码样式-->
                                <div class="display-flex" style="justify-content: space-around;">
                                    <span>{{ item.id }}</span>
                                    <div style="width: 24px;">
                                        <img v-if="item.image??item.avatar" style="width:24px;height:24px;border-radius:50%;"
                                            :src="Fast.api.cdnurl(item.image??item.avatar)">
                                    </div>
                                    <div style="width: 80px;">{{ item.name??item.username }}</div>
                                    <div style="width: 90px;">
                                        <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                        <div style="width: 90px;text-align: center;" v-else>-</div>
                                    </div>
                                </div>
                            </el-option>
                            <div class="text-center"
                                style="position: sticky;background: #fff;height:38px;top:0;z-index:1">
                                <div class="text-normal display-flex" style="justify-content: center;">
                                    <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentUserPage"
                                        :total="totalUserPage" layout="total, sizes, prev, pager,next, jumper"
                                        pager-count="5" @size-change.stop="pageUserSizeChange"
                                        @current-change="pageUserCurrentChange" />
                                    </el-pagination>
                                    <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getUser">跳转
                                    </div>
                                </div>
                            </div>
                        </el-select>
                    </div>
                    <!--<div class="form-tip">此处可以放字段说明等信息</div>-->
                </div>
       </el-form-item>
        <el-form-item label="{:__('Ip')}：" prop="ip">
          <el-input v-model="baseFrom.ip" placeholder="请输入{:__('ip')}" size="medium"></el-input>
       </el-form-item>
        </el-form>
    </div>
    <div class="page-footer display-flex">
        <div @click="baseSub" class="btn-common footer-btn-1">取消</div>
        <div @click="baseSub('yes','baseFrom')" class="btn-common footer-btn-2">确定</div>
    </div>
</div>


